<template>
	<view class="content">
			<view class="club-item" >
				<view class="club-top flex-align-center">
					<img class="club-img" :src="item.gameImg" alt="">
					<view class="club-info">
						<text class="title">{{item.name}}</text>
						<view class="c-info flex-align-center">
							<img src="../../../static/img/img/fx-time.png" class="icon" alt="">
							<text>{{item.gameStartTime+'-'+item.gameEndTime}}</text>
						</view>
						<view class="c-info flex-align-center">
							<img src="../../../static/img/img/fx-dingwei.png" class="icon" alt="">
							<text>{{item.address}}</text>
						</view>
						<view class="c-info flex-align-center">
							<img src="../../../static/img/img/fx-qiye.png" class="icon" alt="">
							<text>{{item.enterpriseName}}</text>
						</view>
					</view>
				</view>
				<view class="flex-justify-s">
					<view class="flex-align-center">
						<view class="c-info-b">
							<img v-for="(ite,idx) in item.gameJoinWXResponseList" :key="idx" class="head-img"
								:src="ite.avatar" alt="">
						</view>
						<text class="cy-num">{{item.joinNum}}人参与</text>
					</view>
					<view @click="application" class="sign-up-now">立即报名</view>
				</view>
			</view>
			

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineProps
	} from 'vue';
	
	const props=defineProps(['item']);
	const info = ref({
		
	})
	
	onMounted(() => {
		// console.log('1111:',props.item)
	});
	const application=()=>{
		// console.log(props.item.id  || props.item.gameId)
		uni.navigateTo({
			url:`/pages/subpackagesSon/competition/details/details?id=${props.item.id  || props.item.gameId}`
		})
	};
</script>

<style lang="scss">
	.content {
		padding: 0 20rpx ;
		

		.club-item {
			height: 270rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 22rpx 0;
			margin-bottom: 22rpx;

			.club-top {
				margin-bottom: 8rpx;
			}

			.club-img {
				width: 220rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.club-info {
				flex: 1;

				.title {
					font-size: 30rpx;
					color: #2C2C2C;
					display: inline-block;
					// margin-bottom: 6rpx;
				}

				.c-info {
					font-size: 20rpx;
					color: #A5A5A5;
					margin-bottom: 6rpx;

					.icon {
						width: 20rpx;
						height: 20rpx;
						margin-right: 8rpx;
					}
				}

			}

			.c-info-b {
				padding-left: 20rpx;
				margin-right: 12rpx;

				.head-img {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
					margin-left: -20rpx;
				}
			}

			.cy-num {
				font-size: 24rpx;
				color: #A5A5A5;
			}

			.sign-up-now {
				width: 167rpx;
				height: 60rpx;
				background: rgba(61, 102, 246, 1);
				box-shadow: 0rpx 4rpx 12rpx rgba(61,102,246,0.55);
				border-radius: 30rpx;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 60rpx;
				color: #FFFFFF;
				text-align: center;
			}

		}
	}
</style>